//模拟考试打分

import React, { useState } from 'react';
import { Layout, Form, Input, Button, Rate, Typography, message } from 'antd';

const { Content } = Layout;
const { Title } = Typography;

const Grade = () => {
  const [form] = Form.useForm();
  const [rating, setRating] = useState(0);

  const handleRatingChange = (value) => {
    setRating(value);
  };

  const handleSubmit = (values) => {
    const { comment } = values;
    // 模拟提交到后端的操作
    console.log('评分:', rating);
    console.log('评语:', comment);
    // 模拟提交成功
    message.success('提交成功');
    // 提交成功后重置表单和评分
    form.resetFields();
    setRating(0);
  };

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Content style={{ padding: '50px' }}>
        <Title level={2}>模拟考试打分</Title>
        <Form form={form} onFinish={handleSubmit} layout="vertical">
          <Form.Item label="学员评分" name="rating" rules={[{ required: true, message: '请选择评分' }]}>
            <Rate allowHalf value={rating} onChange={handleRatingChange} />
          </Form.Item>
          <Form.Item
            label="评语"
            name="comment"
            rules={[{ required: true, message: '请输入评语' }, { max: 100, message: '评语不能超过100个字符' }]}
          >
            <Input.TextArea rows={4} placeholder="请输入评语" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Content>
    </Layout>
  );
};

export default Grade;